<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Circles with Numbers</title>
<style>
  .circle {
    display: inline-block; /* 使元素在同一行内显示，直到没有空间再自动换行 */
    width: 50px; /* 圆的直径 */
    height: 50px; /* 圆的直径 */
    border-radius: 50%; /* 使元素变成圆形 */
    border: 2px solid gray; /* 圆的边框 */
    text-align: center; /* 数字居中显示 */
    line-height: 50px; /* 数字上下居中 */
    background-color: blue; /* 初始背景颜色 */
    color: white; /* 文字颜色 */
  }

  .circle:nth-child(odd) {
    background-color: red; /* 奇数圆的背景颜色 */
  }
</style>
</head>
<body>

<div class="circle">1</div>
<div class="circle">2</div>
<div class="circle">3</div>
<div class="circle">4</div>
<div class="circle">5</div>
<div class="circle">6</div>
<div class="circle">7</div>
<div class="circle">8</div>
<div class="circle">9</div>
<div class="circle">10</div>
<div class="circle">11</div>
<div class="circle">12</div>
<div class="circle">13</div>
<div class="circle">14</div>
<div class="circle">15</div>
<div class="circle">16</div>
<div class="circle">17</div>
<div class="circle">18</div>
<div class="circle">19</div>
<div class="circle">20</div>



<span class="circle">1</span>
<span class="circle">2</span>
<span class="circle">3</span>
<span class="circle">4</span>
<span class="circle">5</span>
<span class="circle">6</span>
<span class="circle">7</span>
<span class="circle">8</span>
<span class="circle">9</span>
<span class="circle">10</span>
<span class="circle">11</span>
<span class="circle">12</span>
<span class="circle">13</span>
<span class="circle">14</span>
<span class="circle">15</span>
<span class="circle">16</span>
<span class="circle">17</span>
<span class="circle">18</span>
<span class="circle">19</span>
<span class="circle">20</span>


<p class="circle">1</p>
<p class="circle">2</p>
<p class="circle">3</p>
<p class="circle">4</p>
<p class="circle">5</p>
<p class="circle">6</p>
<p class="circle">7</p>
<p class="circle">8</p>
<p class="circle">9</p>
<p class="circle">10</p>
<p class="circle">11</p>
<p class="circle">12</p>
<p class="circle">13</p>
<p class="circle">14</p>
<p class="circle">15</p>
<p class="circle">16</p>
<p class="circle">17</p>
<p class="circle">18</p>
<p class="circle">19</p>
<p class="circle">20</p>


</body>
</html>4